//我要投诉提交页面
<template>
  <div class="my-suggest-form">
    <group>
      <x-input title="投诉主题" class="input-red"
               v-model="pageData.topic"
               placeholder="请输入投诉主题"></x-input>
      <selector title="投诉类型" class="input-red"
                v-model="pageData.suggestType"
                :options="pageData.suggestTypeList"></selector>
      <selector title="采购过程"
                v-model="pageData.suggestFj"
                :options="pageData.processList"></selector>
      <x-input title="合作项目"
               v-model="pageData.projName"
               placeholder="请输入合作项目"></x-input>
      <x-input title="所属合同"
               v-model="pageData.contactName"
               placeholder="请输入所属合同"></x-input>
      <selector title="所属公司"
                v-model="pageData.company"
                :options="pageData.companyList"></selector> 
               <!-- <popup-picker title="所属公司" :data="pageData.companyList" :columns="3" v-model="pageData.companyValue" show-name></popup-picker> -->
      <x-textarea title="投诉内容" class="input-red"
                  v-model="pageData.suggestContent"
                  placeholder="请简要说明投诉的内容"></x-textarea>
      <div class="group-item weui-cell">
        <div class="weui-cell__hd">投诉附件</div>
        <div class="weui-cell__bd"></div>
      </div>
      <ul class="img-list">
        <li v-for="(item,index) in files"
            :key="index">
          <div class="bg-img"
               :style="{backgroundImage: 'url('+item.blob+')'}">
               <img src="../../assets/img/deletefile.png" class="delete" @click="deleteFile(item)"  >
               </div>
        </li>
        <li>
          <vue-file-upload class="upload"
                           label=""
                           url=''
                           ref="vueFileUploader"
                           :multiple="true"
                           v-bind:filters="filters"
                           v-bind:events='cbEvents'
                           v-bind:request-options="reqopts"
                           v-on:onAdd="onAddItem"></vue-file-upload>
        </li>
      </ul>
      <x-switch title="匿名投诉"
                v-model="pageData.isAnonymous"></x-switch>
    </group>
    <group>
      <x-input title="姓名　　"
               v-model="pageData.name"
               placeholder="请输入姓名"></x-input>
      <x-input title="联系电话"
               v-model="pageData.call"
               placeholder="请输入联系电话"></x-input>
      <x-input title="邮箱　　"
               v-model="pageData.email"
               placeholder="请输入邮箱"></x-input>
    </group>
    <div class="custom-btn">
      <x-button type="warn"
                class="confirm-btn"
                @click.native="commit()">提交</x-button>
    </div>
  </div>
</template>

<script>
import { Selector, Group, XInput, XTextarea, XSwitch, XButton, PopupPicker } from 'vux'
import VueFileUpload from 'vue-file-upload'
import { SuggestService } from '../../service/Services'

export default {
  name: 'MySuggestForm',
  components: {
    VueFileUpload,
    Selector,
    Group,
    XInput,
    XTextarea,
    XSwitch,
    XButton,
    PopupPicker
  },
  data () {
    return {
      pageData: {
        topic: '', // 投诉主题
        suggestType: '', // 投诉类型
        suggestTypeList: [],
        suggestFj: '', // 投诉环节
        processList: ['招标预告', '标书编制', '资格预审', '发标', '回标', '评标', '商务谈判', '定标', '签约'],
        projName: '', // 合作项目
        contactName: '', // 所属合同
        companyValue: [],
        companyList: [], // 所属公司
        suggestContent: '', // 投诉内容
        isAnonymous: false,
        name: '',
        call: '',
        email: '',
        company: {}
      },
      files: [],
      filters: [
        {
          name: 'imageFilter',
          fn (file) {
            let type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|'
            return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1
          }
        }
      ],
      // 回调函数绑定
      cbEvents: {
        onCompleteUpload: (file, response, status, header) => {
          console.log(file)
          console.log('finish upload;')
        }
      },
      // xhr请求附带参数
      reqopts: {
        formData: {
          tokens: 'tttttttttttttt'
        },
        responseType: 'json',
        withCredentials: false
      }
    }
  },
  methods: {
    deleteFile (file) {
      file.remove()
    },
    loadData () {
      // 如果没有登录进来就是匿名投诉
      if (!this.$store.getters.getUserInfo) {
        this.pageData.isAnonymous = true
      }
    // 查询投诉类型
      SuggestService.getSuggestType().then((res) => {
        let data = res.Data
        for (var i = 0; i < data.length; i++) {
          let item = {}
          item.key = data[i].SuggestTypeGUID
          item.value = data[i].SuggestName
          this.pageData.suggestTypeList.push(item)
        }
      }).catch((res) => {
        this.$vux.toast.show({
          text: '请求失败,请联系管理员',
          type: 'cancel',
          width: '180px'
        })
      })

      // 查询公司
      SuggestService.getBU().then((res) => {
        let data = res.Data
        for (var i = 0; i < data.length; i++) {
          let e = data[i]
          if (e.ParamLevel !== 0) {
            let item = {}
            // item.value = e.value
            // item.parent = e.ParentCode
            // item.guid = e.BUGUID
            // item.name = e.text
            item.key = e.BUGUID
            item.value = e.text
            if (e.ParamLevel === 1) { item.parent = 0 }
            if (e.ParamLevel === 0 || !e.IfEnd) continue
            this.pageData.companyList.push(item)
          }
        }
      }).catch((res) => {
        this.$vux.toast.show({
          text: '请求失败,请联系管理员',
          type: 'cancel',
          width: '180px'
        })
      })
    },
    commit () {
      let bFlag = false
      if (!this.pageData.topic || !this.pageData.suggestType || !this.pageData.company || !this.pageData.suggestContent) { bFlag = true }
      if (bFlag) {
        this.$vux.toast.show({
          text: '投诉主题、投诉类型、所属公司、投诉内容不能为空！',
          type: 'warn',
          width: '300px'
        })
        return false
      }
      if (!this.pageData.isAnonymous) {
        if (!this.pageData.name || !this.pageData.call || !this.pageData.email) { bFlag = true }
        if (bFlag) {
          this.$vux.toast.show({
            text: '姓名、联系电话、邮箱不能为空！',
            type: 'warn',
            width: '300px'
          })
          return false
        }
      }
      var base64FileData = []
      this.files.forEach(item => {
        var reader = new FileReader()
        reader.readAsDataURL(item.file)
        reader.onload = function () {
          base64FileData.push(this.result)
        }
      })
      // 调用后台API，把base64FileData传给后台
      var obj = this
      setTimeout(function () {
        let strFileData = ''
        for (var i = 0; i < base64FileData.length; i++) {
          base64FileData[i] = base64FileData[i].split(',')[1]
          if (i !== base64FileData.length - 1) {
            strFileData += base64FileData[i] + '@'
          } else {
            strFileData += base64FileData[i]
          }
        }
        let company = {
          key: obj.pageData.company,
          value: obj.pageData.companyList.find(item => item.key === obj.pageData.company).value
        }
        let suggestType = {
          key: obj.pageData.suggestType,
          value: obj.pageData.suggestTypeList.find(item => item.key === obj.pageData.suggestType).value
        }
        let providerGUID = '00000000-0000-0000-0000-000000000000'
        if (obj.$store.getters.getUserInfo) {
          providerGUID = obj.$store.getters.getUserInfo.ProviderGUID
        }
        let suggestData = {
          SuggstName: obj.pageData.topic, // 投诉主题
          MySuggestTypeGUID: suggestType.key, // 投诉类型GUID
          SuggestTypeName: suggestType.value, // 投诉类型
          SuggestFj: obj.pageData.suggestFj, // 投诉环节
          ProjName: obj.pageData.projName, // 合作项目
          ContactName: obj.pageData.contactName, // 所属合同
          BelongBUGUIDList: company.key, // 所属公司GUID
          BelongBUNameList: company.value, // 所属公司
          SuggestContent: obj.pageData.suggestContent, // 投诉内容
          Name: obj.pageData.name,
          Call: obj.pageData.call,
          Email: obj.pageData.email,
          PhoBase64: strFileData, // 图片
          ProviderGUID: providerGUID
        }
        obj.$vux.loading.show({
          text: '提交中...'
        })
        SuggestService.submittMySuggest(suggestData).then((res) => {
          obj.$vux.loading.hide()
          if (!obj.$store.getters.getUserInfo) {
            obj.$vux.toast.show({
              text: '提交成功,2秒后跳转主页',
              type: 'success',
              width: '180px'
            })
            setTimeout(function () {
              obj.$router.push({path: '/demos/index'})
            }, 2000)
          } else {
            obj.$router.push({path: '/demos/my-suggest'})
          }
        }).catch((res) => {
          obj.$vux.toast.show({
            text: '提交失败,请联系管理员',
            type: 'cancel',
            width: '180px'
          })
        })
      }, 100)
    },
    onAddItem (files) {
      this.files = files
      this.files.forEach(item => {
        item.blob = window.URL.createObjectURL(item.file)
      })
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style scoped lang='less'>
// .weui-label{
//   color: red!important;
// }

.my-suggest-form {
  ul.img-list {
    list-style: none;
    margin: 0 15px;
    li {
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;
      margin-right: 12px;
      margin-bottom: 12px;
      width: 80px;
      height: 80px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border: 1px dashed #cbcbcb;
      .bg-img {
        width: 100%;
        height: 100%;
        background-size: cover;
      }
      .upload {
        width: 80px;
        height: 80px;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 0 none;
        background-color: #f5f5f5;
        &:after {
          content: '+';
          font-size: 50px;
          color: #cbcbcb;
        }
      }
      &:last-child {
        margin-left: -4px;
      }
    }
  }
  .custom-btn {
    margin: 20px;
    .confirm-btn {
      background-color: #dc220b;
    }
  }
}

.clearfix:after {
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  content: '.';
}

 .delete {
   position: relative;
    top: 0px;
    left: 52px;
    width: 25px;
    height: 25px;
    z-index: 1000;
  }
</style>
